<template>
  <div class="index">
    <div class="home-banner">
      <a href="/d/v2/?type=ck&amp;pkn=wap-banner" ka="banner-download-app"></a>
    </div>
    <div class="home-search">
      <div class="search">
        <p class="ipt-wrap">
          <button class="btn btn-search" @click ="getSearch(search)">搜素</button>
          <input type="text" class="ipt-search" placeholder="搜索职位/公司" :value="search" @change="getSearchchange" />
        </p>
      </div>
      <a href="/mpa/html/wapchat/list">
        <div class="chat-wrap">
          <div class="chat-icon">
            <img class="chat-img" src="https://z.zhipin.com/H5/images/share/chat.png" />
          </div>
          <span class="chat-text">消息</span>
        </div>
      </a>
    </div>
    <IndexItem></IndexItem>
  </div>
</template>
<script>
import IndexItem from './components/indexItem'
import "../assets/style/reset.scss"
import {mapState} from 'vuex';
export default {
  name: "Index",
  data:function(){
    return{

    }
  },
  methods:{
    getSearchchange(e){
        console.log(e.target.value)
        this.$store.commit('SET_SEARCHLIST',e.target.value);
    },
    getSearch(search){
        this.$store.state.positionlist;
        this.$store.commit('SET_SEARCHLIST',search);
        this.$router.push("/position")
        console.log(search)
    }
  },
  computed:{
    ...mapState(['search'])
  },
  components:{
    IndexItem
  }
};
</script>
<style lang="scss" scoped>
.home-banner {
  width: 100%;
  height: 196px;
  display: block;
  background: url(../assets/images/home-bg.png) center center no-repeat;
  color: #fff;
  text-align: center;
  -webkit-background-size: cover;
  background-size: cover;
  a {
    display: block;
    background: url(../assets/images/home-search-text.png) center 38px no-repeat;
    -webkit-background-size: 252px auto;
    height: 138px;
  }
}
.home-search {
  position: relative;
  .search {
    float: left;
    padding: 0;
    position: absolute;
    z-index: 10;
    top: 0;
    margin-top: -58px;
    display: flex;
    align-items: center;
    .ipt-wrap {
      margin: 0 15px;
      padding-right: 70px;
      background: #fff;
      border-radius: 30px;
      position: relative;
    }
    .btn-search {
      background-color: #fff;
      color: #5bd4c7;
      font-size: 14px;
      position: absolute;
      border: none;
      width: 60px;
      top: 10px;
      right: 8px;
      background: 0 0;
    }
    .ipt-search {
      width: 216px;
      height: 37px;
      line-height: 32px;
      border-radius: 30px;
      border: none;
      font-size: 14px;
      color: #aeaeae;
      text-align: left;
      padding-left: 20px;
      background: #fff;
    }
  }
  a {
    position: absolute;
    text-decoration: none;
    color: #414a60;
    top: -58px;
    right: 0px;
    .chat-wrap {
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-right: 15px;
    }
    .chat-icon {
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .chat-img {
      width: 18px;
      height: 18px;
    }
    .chat-text {
      margin-top: 2px;
      font-size: 10px;
      white-space: nowrap;
      color: #fff;
      line-height: 14px;
    }
  }
}
</style>
